<template>
    <div>
        <el-tooltip class="item" effect="dark" content="开启自定义" placement="top">
            <el-switch v-model="custom" style="margin-right: 10px;"></el-switch>
        </el-tooltip>
        <el-tooltip v-if="custom" class="item" effect="dark" content="行高" placement="top">
            <el-slider
                    v-model="lineHeight"
                    input-size="mini"
                    :min="0"
                    :max="10"
                    :step="0.1"
                    height="20"
                    size="mini"
                    show-input>
            </el-slider>
        </el-tooltip>
    </div>
</template>

<script type="text/javascript">
    import mutil from '../../../utils/mutil';

    export default {
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            value: {
                type: [ String, Number ]
            },
            eleDef: {
                type: Object
            },
            currentItemElCode: String
        },
        data () {
            return {
                innerValue: "",
                lineHeight: "",
                custom: false,

                parsing: false
            }
        },
        mounted () {
            this.innerValue = this.value;
        },
        watch: {
            innerValue(val) {
                this.$emit("change", val);
            },
            value(val) {
                this.willReceiveProps(val);
            },
            lineHeight() {
                this.setValue();
            },
            custom(val) {
                if(val) {
                    let name = this.currentItemElCode || _.get(this.eleDef, "_code");
                    if(name) {
                        let nodes = document.getElementsByName(name);
                        let ele = _.get(nodes, "[0]");

                        if(ele) {
                            const computedStyle = window.getComputedStyle(ele);
                            const lineHeight = computedStyle.getPropertyValue('line-height');
                            if(lineHeight) {
                                this.lineHeight = lineHeight;
                            }
                        }
                    }

                }
                this.setValue();
            }
        },
        methods: {
            ...mutil,
            willReceiveProps(newVal) {
                if(!this.$utils.deepEquals(newVal, this.innerValue)) {
                    this.innerValue = newVal;
                    this.parseValue();
                }
            },
            parseValue() {
                this.parsing = true;


                this.parsing = false;
            },
            setValue() {
                let val = "";

                if(this.parsing) return;

                if(this.custom) {
                    val = this.lineHeight
                } else {
                    val = "";
                }

                this.innerValue = val;
            }
        }
    }
</script>
